<template>
  <div class="singleBlog container">
      <div v-if="!delSuccess">
        <div class="page-header">
          <h1>标题：{{blog.title}}<small>标签：<li v-for="cate in blog.cates" class="label label-info">{{cate.name}}</li></small> </h1>
        </div>
        
        <article>正文：<br>{{blog.content}}</article>
        <div class="pull-right">
            操作：<button data-toggle="modal" data-target="#delModal" class="btn-danger btn-small">删除</button>
        </div>
      </div>
      <div v-if="delSuccess">
          <h1>删除成功！</h1>
          <router-link class="btn btn-default" to="/">返回主页</router-link>
      </div>
      <div id="delModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
              <h4 class="modal-title">删除博客</h4>
            </div>
            <div class="modal-body">
              <p>确定删除博客标题为{{blog.title}}&hellip;</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button v-on:click="del" type="button" class="btn btn-primary">确定</button>
            </div>
          </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
      </div><!-- /.modal -->
  </div>
</template>

<script>
export default {
  name: 'singleBlog',
  data () {
    return {
      blog:{},
      delSuccess:false
    }
  },
  created(){
    this.$http.get("http://127.0.0.1:8000/myblog/api/blog?id="+this.$route.params.id)
    .then(response=>{
      console.log(response);
      this.blog = response.body;
    });
  },
  methods:{
    showModal(){

    },
    del(){
      this.$http.get("http://127.0.0.1:8000/myblog/api/del?id="+this.$route.params.id)
      .then(response=>{
        console.log("del",response);
        this.delSuccess = true;
        $('#delModal').modal('hide')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
